<!-- 系统参数 -->
<template>
    <div class="main-header">
      <el-card class="box-card" style="height: 400px;" shadow="never">
        <!-- <div slot="header" class="clearfix">
          <span class="sign">I</span>
          <span>系统告警阈值</span>
          <el-button style="float: right;" type="primary" @click="confirmClick('systemForm')">保存设置</el-button>
        </div> -->
        <div slot="header" class="cardHeard" style="height: 38px">
          <div>
            <span class="title">系统告警阈值</span>
          </div>
          <div>
            <el-button style="float: right; margin-left:5px;" type="primary" @click="confirmClick('systemForm')">保存设置</el-button>
          </div>
        </div>
        <div>
          <el-form :model="systemForm" :rules="rules" ref="systemForm" label-width="30%">
            <el-row :gutter="24">
                <el-form-item  label="性能检测间隔：" prop="CheckDcdPerfInterval" style="padding-bottom: 10px;">
                  <el-input size="small" v-model.number="systemForm.CheckDcdPerfInterval" placeholder="请输入" style="width:150px !important;" maxlength="6"><template slot="append">秒</template></el-input>
                </el-form-item>
                <el-form-item  label="CPU使用率告警阈值>=" prop="CpuThreshHold" style="color:#606266;padding-bottom: 10px;">
                  <el-input size="small" v-model.number="systemForm.CpuThreshHold" placeholder="请输入" style="width:150px !important;" maxlength="3"><template slot="append">%</template></el-input>  
                  连续  <el-input size="small" v-model.number="systemForm.CpuKeepTimesHold" placeholder="请输入" style="width:150px !important;" maxlength="6"><template slot="append">次</template></el-input>  超越告警阈值
                </el-form-item>
                <el-form-item  label="内存使用率告警阈值>=" prop="MemThreshHold" style="color:#606266;padding-bottom: 10px;">
                  <el-input size="small" v-model.number="systemForm.MemThreshHold" placeholder="请输入" style="width:150px !important;" maxlength="3"><template slot="append">%</template></el-input>  
                  连续  <el-input size="small" v-model.number="systemForm.MemKeepTimesHold" placeholder="请输入" style="width:150px !important;" maxlength="6"><template slot="append">次</template></el-input>  超越告警阈值
                </el-form-item>
                <el-form-item  label="磁盘使用率告警阈值>=" prop="DiskThreshHold" style="color:#606266;padding-bottom: 10px;">
                  <el-input size="small" v-model.number="systemForm.DiskThreshHold" placeholder="请输入" style="width:150px !important;" maxlength="3"><template slot="append">%</template></el-input> 
                  连续  <el-input size="small" v-model.number="systemForm.DiskKeepTimesHold" placeholder="请输入" style="width:150px !important;" maxlength="6"><template slot="append">次</template></el-input>  超越告警阈值
                </el-form-item>
            </el-row>
          </el-form>    
        </div>
        <div>
        </div>
      </el-card>
    </div>
</template>

<script>
import { connrequest } from '@/api/firstPage';
export default {
    data(){
        let numvalidates = (rule, value, callback) => {
            if (Number.isInteger(Number(value)) && (value > 0 && value != '')) {
                callback();
            }else{
              callback(new Error('请输入为大于1的正整数'));
            }
        };
        let validates = (rule, value, callback) => {
            if (Number.isInteger(Number(value)) && (value <= 100 && value >= 0 && value != '')) {
                callback();
            }else{
              callback(new Error('请输入范围为0-100的正整数'));
            }
        };
        return{
            systemForm:{
                CpuThreshHold:80, //CPU使用率告警阈值
                MemThreshHold:80, //内存使用率告警阈值
                DiskThreshHold:80, //磁盘使用率告警阈值
                CpuKeepTimesHold: 10,
                MemKeepTimesHold: 10,
                DiskKeepTimesHold: 10,
            },
            rules:{ //表单规则
              CheckDcdPerfInterval:{ required: false, validator: numvalidates, trigger: 'blur' },
                CpuThreshHold:{ required: true, validator: validates, trigger: 'blur' },
                MemThreshHold: { required: true, validator: validates, trigger: 'blur' },
                DiskThreshHold: { required: true, validator: validates, trigger: 'blur' }
            },
        }
    },
    created(){
        this.getData();
    },
    methods:{
        // 获取系统参数数据
        async getData(){
            const res = await connrequest('GetSystemAlarmConfig');
            if (res.Status.StatusCode===0) {
                this.systemForm = res.Data
            }
        },
        // 提交系统参数配置
        async confirmClick(formName){
          this.$refs[formName].validate(async(valid) => {
            if (valid) {
              const paramData = {
                  Data:this.systemForm,
              };
              const res = await connrequest('SetSystemAlarmConfig', paramData);
              if (res.Status.StatusCode===0) {
                  this.$message.success('更改成功');
                  this.getData();
                  this.$emit('changeData', 'SystemParameter');
              }
            } else {
                  return false;
                }
            });   
        }
    }
}
</script>

<style lang="scss" scoped>
.text {
  font-size: 14px;
}
.box-card{
  // margin: 16px;
  margin-bottom: 10px !important;
}
.cardHeard{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
::v-deep .el-input--small{
    width:10% !important;
}
::v-deep .el-card__header{
  padding: 10px !important;
}
.el-form-item{
  margin-bottom: 10px !important;
}
</style>